<template>
  <div class="common-pagination">
    <el-pagination
      :current-page="pagination.page"
      :page-size="pagination.limit || 20"
      layout="total, prev, pager, next"
      :total="pagination.total"
      v-bind="$attrs"
      v-on="$listeners"
      small
      background
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: "pagination",
  props: {
    pagination: {
      type: Object,
      default: {
        page: 1,
        limit: 20,
        total: 20,
      },
    },
  },
  data() {
    return {
      // this_pagination: {
      //   limit: 20,
      //   page: 1,
      //   total: 15,
      //   pageSizes: [20, 50, 100, 500]
      // }
    };
  },
  created() {
    this.this_pagination = this.pagination;
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("page", val);
    },
    handleSizeChange(val) {
      this.$emit("page", 1);
      // this.$emit("handleSizeChange", val);
    },
  },
};
</script>
<style scoped>
::v-deep .el-pagination__sizes {
  margin-top: -4px;
}
.common-pagination {
  margin: 10px 20px 10px 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;

  align-items: center;
}
</style>

